<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Border Layout</title>
        <link rel="stylesheet" href="../js/jquery/ui/css/custom-theme/jquery-ui-1.7.2.custom.css">
        <script type="text/javascript" src="../js/jquery/jquery-1.3.2.js">
        </script>
        <script type="text/javascript" src="../js/jquery/ui/jquery-ui-1.7.2.custom.min.js">
        </script>
        <script type="text/javascript" src="jquery.sizes.js">
        </script>
        <script type="text/javascript" src="jquery.metadata.js">
        </script>
        <script type="text/javascript" src="jlayout.border.js">
        </script>
        <script type="text/javascript" src="jquery.jlayout.js">
        </script>
        <script type="text/javascript">
            jQuery(function($){
                var container = $('.layout');
                function relayout(){
                    container.layout({
                        resize: true
                    });
                }
                $(window).resize(function(){
                    relayout();
                });
            });
        </script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                overflow: hidden;
            }
            
            .layout {
                width:100%;
				height: 100%;
				position:relative;
				display:block;
				
            }
            
            .center, .east, .west, .north, .south {
                background-color: rgb(220, 220, 220);
                border: 1px solid rgb(200, 200, 200);
                text-align: center;
                display: inline-block;
            }
            
            .west, .east {
                width: 8%;
            }
            
            .north, .south {
                height: 10%;
            }
        </style>
    </head>
    <body>
        <div class="layout {layout:{type:'border',hgap:3,vgap:3}} ui-widget">
            <div class="center">
                center
            </div>
            <div class="east">
                west
            </div>
            <div class="west">
                east
            </div>
            <div class="north">
                north
            </div>
            <div class="south">
                south
            </div>
        </div>
    </body>
</html>
